<template>
	<view class = 'header' :style="{color:color}">
		<!-- 自定义的头部 -->
		<view class="head-left" v-if = "icon" >
			
			<text class="iconfont icon-zuojiantou" @click="toBack"></text>
			<text>|</text>
			<text class="iconfont icon-zhuye" @click="toHome"></text>
		</view>
		<view >
			{{title}}
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"musicHeader",
		data() {
			return {
				
			};
		},
		props:['title','icon','color'],
		methods:{
			toBack(){
				uni.navigateBack()
				console.log("back")
			},
			toHome(){
				console.log("home ")
				uni.navigateTo({
					url:'../../pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.header {
	width: 100%;
	height: 75px;
	line-height: 80px;
	text-align: center;
	position: relative;
}
.head-left {
	width: 90px;
	
	 height: 30px; 
	
	position: absolute;
	top: 25px;
	left: 10px;
	background: rgba(0,0,0,0.3);
	border-radius: 15px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	.iconfont {
		font-size: 25px;
		color: #fff;
	}
}
</style>
